<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
  <title>便签</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="preload" href="./static/font/font.woff2" as="font">
  <style>
    @font-face {
      font-family: 'Gloria Hallelujah';
      font-style: normal;
      font-weight: 400;
      font-display: fallback;
      src: local('Gloria Hallelujah'), local('GloriaHallelujah'), url(./static/font/font.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    body {
      margin: 0;
      font-family: 'Gloria Hallelujah', sans-serif;
      font-size: 22px;
      font-display: fallback;
      letter-spacing: 0.05em;
      line-height: 2;
    }

    article {
      padding: 15px 20px 40px;
      max-width: 800px;
      margin: 0 auto;
    }
    a,
    a:hover,
    a:visited {
      color: inherit;
      text-decoration: none;
      outline: none;
    }

    a.textlink {
      box-shadow: 0 -6px #f0e6f4 inset;
    }

    wired-button {
      margin: 5px 10px;
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      background: #f0e6f4;
    }

    wired-card {
      display: block;
      width: 100%;
      box-sizing: border-box;
    }

    @media (max-width: 600px) {
      body {
        font-size: 19px;
        letter-spacing: 0.05em;
      }

      article {
        padding: 5px 16px 40px;
      }
    }
  </style>

</head>

<body>
<div id="app">
  <div style="width: 800px;margin-right: auto ; margin-left: auto">
    <div style="text-align: center ; margin-bottom: 10px">
      <wired-input placeholder="根据输入内容查找" style="width: 300px"></wired-input>
      <wired-button >查询</wired-button>
      <wired-button style="color: blue"  >添加</wired-button>
    </div>
    <el-row :gutter="100">
      <el-col :span="12" v-for="item in dataList" key="item.id">
        <wired-card elevation="4" style="margin-bottom: 20px">
          <div style="text-align: right">
            <wired-button>查看</wired-button>
            <wired-button style="color: blue">编辑</wired-button>
            <wired-button style="color: red">删除</wired-button>
          </div>
          <h3>{{item.title}}</h3>
          <p
            style=" line-height: 20px; white-space: nowrap; word-break: keep-all; overflow: hidden; text-overflow: ellipsis">
            {{item.content}}
          </p>
        </wired-card>
      </el-col>
    </el-row>
  </div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script defer src="./static/libs/main.min.js"></script>
<script>


  new Vue({
    el: '#app',
    data: function () {
      return {
        dataList: [
          {
            id: 1,
            title: '111',
            content: '111',
            last_time: new Date()
          }, {
            id: 2,
            title: '333',
            content: '444444333333333333333333333',
            last_time: new Date()
          }, {
            id: 13,
            title: '555',
            content: '113455341',
            last_time: new Date()
          },
        ]
      }
    },
    computed: {},
    created: function () {
      this.refresh();
    },
    methods: {
        doAdd(){
          location.href= '/editNote.html'
        },
        refresh(){
          const that = this;
          that.$http.post("/api/notes/queryList", JSON.stringify({})).then(res => {
            that.dataList = res.data;
          }).catch(err => {
            this.$message.error("获取便签失败：" + err)
          });
        }
    },
    components: {}
  })
</script>
</html>
